<template>
  <div>
    <p :style="{ color: color, fontSize: size }">{{ timeRemaining }}</p>
  </div>
</template>

<script>
export default {
  props: {
    targetTime: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    },
    size: {
      type: String,
      default: '12px'
    }
  },
  data() {
    return {
      timeRemaining: ''
    }
  },
  created() {
    this.calculateTimeRemaining()
    this.startTimer()
  },
  methods: {
    // 计算剩余时间
    calculateTimeRemaining() {
      if (!this.targetTime) return ''
      const targetDate = new Date(this.targetTime)
      const currentDate = new Date()
      const timeDifference = currentDate - targetDate
      const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
      const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000)

      this.timeRemaining = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`
    },
    // 启动定时器更新剩余时间
    startTimer() {
      setInterval(() => {
        this.calculateTimeRemaining()
      }, 1000) // 每秒更新一次
    }
  }
}
</script>
